<template>
  <el-row>
    <el-row>
      <el-col :span="8" >
        <h2 id="tou">安静书屋</h2>
      </el-col>
      <el-col :span="16"  style="padding-top:30px;">
        <el-row>
            <el-breadcrumb separator=" ">
        <el-breadcrumb-item><el-link>首页</el-link></el-breadcrumb-item>
        <el-breadcrumb-item><el-link>分类</el-link></el-breadcrumb-item>
       <el-breadcrumb-item><el-link>排行</el-link></el-breadcrumb-item>
       
     
           <el-breadcrumb-item><el-badge value="new">
             <el-link>征文大赛</el-link>
           </el-badge>
         </el-breadcrumb-item>
          <el-breadcrumb-item><el-link>下载</el-link></el-breadcrumb-item>
           <el-autocomplete v-model="sou" placeholder="请输入"
           :fetch-suggestions="query"
           @select="sel"
           :trigger-on-focus="hover"
           >
           <el-button type="primary" class="el-icon-search" slot="append"></el-button>
           </el-autocomplete>
 
          <el-button  type="primart" style="position: relative;bottom:2px;">登录</el-button>
            
        </el-breadcrumb>
       
        </el-row>
      
      </el-col>
    </el-row>
    <el-row id="bg"  style="margin-top:10px;">
      <el-col :span="24" :xs="24" style="background:black;">
        <el-carousel activeNameItem="a" >
          <el-carousel-item name="a">
              <el-image src="/static/4.jpg" style="width:20%;height:100%;"></el-image>
              <el-image src="/static/2.jpg" style="width:25%;height:100%;"></el-image>
              <el-image src="/static/7.jpg" style="width:20%;height:100%;"></el-image>
              <el-image src="/static/7.jpg" style="width:25%;height:100%;"></el-image>
          </el-carousel-item>
           <el-carousel-item name="b">
             <el-image src="/static/8.jpg" style="width:25%;height:100%;"></el-image>
             <el-image src="/static/9.jpg" style="width:25%;height:100%;"></el-image>
             <el-image src="/static/4.jpg" style="width:20%;height:100%;"></el-image>
             <el-image src="/static/4.jpg" style="width:25%;height:100%;"></el-image>
           </el-carousel-item>
           
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :xs="24">
        <h1 style="text-align:center;" id="cb">出版图书</h1>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-row >
          <el-col :span="7" :xs="15" :push="8"  >
            <el-breadcrumb separator="|">
          <el-breadcrumb-item>小说</el-breadcrumb-item>
          <el-breadcrumb-item>励志成功学</el-breadcrumb-item>
          <el-breadcrumb-item>文学</el-breadcrumb-item>
          <el-breadcrumb-item>经济管理</el-breadcrumb-item>
          <el-breadcrumb-item>更多</el-breadcrumb-item>
        </el-breadcrumb>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8" :xs="24" style="border-right :1px solid black;height:500px;">
        <el-row>
          <el-col :span="24" :xs="24">
            <el-tag type="danger">重点推荐</el-tag><br>
  橙红年代:屌丝逆袭现代都市<br>
<br>
作者: 骁骑校<br>
<br>
一个小贩经历了八年血与火的考验后，沾满硝烟气息回到花花都市！
          </el-col>
          <el-row>
            <el-col :span="24" :xs="24" style="margin-top:40px;">
              <el-image src="/static/ch.jpg"></el-image>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="8" :xs="24" style="border-right:1px solid black;height:500px;">
        <el-row>
          <el-col :span="12" :xs="12" style="box-sizing: border-box;padding:30px;">
            <el-image src="/static/zm.jpg"></el-image><br>
            <el-link>我亲爱的小竹马</el-link><br>
            <span>酒小七</span>
          </el-col>
           <el-col :span="12" :xs="12" style="box-sizing: border-box;padding:30px;">
             <el-image src="/static/hnv.jpg"></el-image><br>
             <el-link>悍妇三嫁</el-link><br>
             <span>秋李子</span>
           </el-col>
           
            <el-row>
              <el-col :span="24" :xs="24">
                 <el-col :span="12" :xs="12" style="box-sizing: border-box;padding:30px;">
               <el-image src="/static/ct.jpg"></el-image><br>
               <el-link>前妻的春天</el-link><br>
              <span>蓝岚</span>
             </el-col>
              <el-col :span="12" :xs="12" style="box-sizing: border-box;padding:30px;">
              <el-image src="/static/yh.jpg"></el-image><br>
              <el-link ref="she" @click="she">异海</el-link><br>
              <span >蛇从革</span>
            </el-col>
              </el-col>
            </el-row>
        </el-row>
      </el-col>
      <el-col :span="8" :xs="24" style="border-box:box;padding-left:30px;padding-bottom:20px;height:500px;">
        <el-row>
          <el-col :span="24" :xs="24"></el-col>
        </el-row>
        <el-row>
          <el-collapse accordion value="0">
          <el-collapse-item name="1" title="大秦帝国">
            <br>
            <el-badge value="特别推荐">
              新书大秦帝国
            </el-badge>
          </el-collapse-item>
          <el-collapse-item name="2" title="全世界都想要的他属于我">
            <br>
            <el-badge :value="num" :max="500">
              全世界都想要的他属于我
            </el-badge>
          </el-collapse-item>
          <el-collapse-item name="3" title="秦非得已">
            秦非得已
          </el-collapse-item>
          <el-collapse-item name="4" title="三体全集">
            三体全集
          </el-collapse-item>
          <el-collapse-item name="5" title="簪中录">
            簪中录
          </el-collapse-item>
          <el-collapse-item name="6" title="分手妻约">
            分手妻约
          </el-collapse-item>
          <el-collapse-item name="7" title="橙红年代屌丝逆袭">
            橙红年代屌丝逆袭
          </el-collapse-item>
          <el-collapse-item name="8" title="嫤语书年">
            嫤语书年
          </el-collapse-item>
          <el-collapse-item name="9" title="家有悍妻">
            家有悍妻
          </el-collapse-item>
          <el-collapse-item name="10" title="五大贼王">
            五大贼王
          </el-collapse-item>
        </el-collapse>
        </el-row>
      </el-col>
    </el-row>
  <el-backtop :visibility-height="he">
    <el-dropdown placement="top" trigger="hover">
  <i class="el-icon-arrow-up" style="font-size:20px;" type="success"></i>
      <el-dropdown-menu>
        <el-dropdown-item><el-link href="#tou">头部</el-link></el-dropdown-item>
         <el-dropdown-item><el-link href="#jx">精选圈子</el-link></el-dropdown-item>
          <el-dropdown-item><el-link href="#man">男生频道</el-link></el-dropdown-item>
           <el-dropdown-item><el-link href="#woman">女生频道</el-link></el-dropdown-item>
            <el-dropdown-item><el-link href="#cb">出版图书</el-link></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-backtop>
  <el-row>
    <el-col :span="24" :xs="24">
      <h1 id="jx" style="text-align:center;">精选圈子</h1>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :xs="24">
      <el-row>
        <el-col :span="8" :xs="12" style="border:1px solid antiquewhite;height:260px;">
          <el-row >
            <el-col :span="16" :xs="16" :push="4" style="text-align:center;">
         <el-badge value="new">
                <el-image src="/static/qc.jpg" style="border-radius:50px;height:100px;width:100px;" ></el-image>
         </el-badge>
         <h4>古代言情</h4>
         <p>相望古言，相聚古言，古言–我们的家园</p>
         <el-row>
           <el-col :span="12" :xs="12">
             <el-badge :value="index" :max="500">
               <i class="el-icon-user-solid"></i>
             </el-badge>
           </el-col>
           <el-col :span="12" :xs="12">
              <el-badge :value="index" :max="500">
               <i class="el-icon-s-order"></i>
             </el-badge>
           </el-col>
         </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" :xs="12" style="border:1px solid antiquewhite;height:260px;">
          <el-row>
            <el-col :span="16" :xs="16" :push="4" style="text-align:center;">
              <el-badge value="love" type="primary">
                <el-image src="/static/xy.jpg" style="border-radius:50px;height:100px;width:100px;"></el-image>
              </el-badge>
              <h4>现代言情</h4>
         <p>Hey, 你的少女心♥掉在这里了...</p>
         <el-row>
           <el-col :span="12" :xs="12">
             <el-badge :value="index" :max="500">
               <i class="el-icon-user-solid"></i>
             </el-badge>
           </el-col>
           <el-col :span="12" :xs="12">
              <el-badge :value="index" :max="500">
               <i class="el-icon-s-order"></i>
             </el-badge>
           </el-col>
         </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" :xs="24" style="border:1px solid antiquewhite;height:260px;">
          <el-row>
            <el-col :span="16" :xs="16" :push="4" style="text-align:center;">
          <el-badge value="young" type="success" style="background-color: bisque;">
                <el-image src="/static/yq.jpg" style="border-radius:50px;height:100px;width:100px;"></el-image>
          </el-badge>
          <h4>青春校园</h4>
         <p>青嶂青溪直复斜，春雪空濛帘外寒；校量功力相千万，园林月白秋霖散</p>
         <el-row>
           <el-col :span="12" :xs="12">
             <el-badge :value="index" :max="500">
               <i class="el-icon-user-solid"></i>
             </el-badge>
           </el-col>
           <el-col :span="12" :xs="12">
              <el-badge :value="index" :max="500">
               <i class="el-icon-s-order"></i>
             </el-badge>
           </el-col>
         </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="24" :xs="24" style="border:1px solid antiquewhite;">
      <h3 style="text-align:center;color:red;">
        征文大赛进行时
      </h3>
      <el-row>
        <el-col :span="20" :xs="20" :push="3">
          <el-row>
            <el-col :span="4" :xs="24">
              <el-image src="/static/tl.jpg" style="border-radius:50px;width:100px;height:100px;"></el-image>
              <el-link style="margin-bottom:80px;"><strong>悬疑推理</strong></el-link>
            </el-col>
            <el-col :span="4" :xs="24" :push="1">
              <el-image src="/static/kh.jpg" style="border-radius:50px;width:100px;height:100px;"></el-image>
              <el-link style="margin-bottom:80px;"><strong>科幻</strong></el-link>
            </el-col>
            <el-col :span="4" :xs="24" :push="1">
              <el-image src="/static/qg.jpg" style="border-radius:50px;width:100px;height:100px;"></el-image>
              <el-link style="margin-bottom:80px;"><strong>情感</strong></el-link>
            </el-col>
            <el-col :span="4" :xs="24" :push="1">
              <el-image src="/static/wx.jpg" style="border-radius:50px;width:100px;height:100px;"></el-image>
              <el-link style="margin-bottom:80px;"><strong>武侠</strong></el-link>
            </el-col>
            <el-col :span="4" :xs="24" :push="1">
              <el-image src="/static/wenxue.jpg" style="border-radius:50px;width:100px;height:100px;"></el-image>
                     <el-link style="margin-bottom:80px;"><strong>文学</strong></el-link>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  {{this.$store.state.book}}
  </el-row>                               
  
</template>

<script>
export default {
  
     mounted() {
      this.restaurants = this.loadAll();
     this.$store.dispatch("book")
     
    }
  ,
  data(){
    return {
      num:1000,
      he:50,
      index:3000,
      sou:"",
      book:""
    }
  },
  methods:{
    query:function(qu,cd){

      const b=this.$store.state.book;
      console.log(b)
       const list=qu?b.filter((x)=>{
         if(x.value.indexOf(qu)===0){
           return x;
         }
       }):b
       cd(list)
    },
    sel:function(){

    },
    she:function(){
      let she=this.$refs.she;
      console.log(she)
    },
    but:function(){console.log(1)},
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter((restaurant) => {//过滤函数变量数组类数字返回操作值
          if(restaurant.value.indexOf(queryString)===0){//类数组里面必须要有一个value自定义属性才能获取变量
            return restaurant
          }//类数组过滤索引内容把符合条件的索引留下
          console.log(restaurant)
         // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
        }) : restaurants;
        // 调用 callback 返回建议列表的数据
        console.log(typeof results)
        cb(results);//返回对象js里面数组是对象数据类型是object
      },
      loadAll() {
        return [
    {
        "value":"兵王在上",
       "zuozhe":"红烧鲤鱼"        
    },
    {
        "value":"正道潜龙",
        "zuozhe":"伪戒"     
    },
    {
        "value":"等你18岁吗，爸妈要离婚",
        "zuozhe":"箫饭"          
    }] 
  },
  created() {
    this.time=setInterval(()=>{
      this.index=this.index+1
      if(this.index==this.src.length){
        this.index=0
      }
    },10000)
 
  },
  destroyed(){
    clearInterval(this.time)
  }
  }}
</script>